<template>
    <div>
        <div class="page-title">问题录入</div>
		<div class="page-content">
            <div>
                <br />
                <el-form label-width="120px" :model="formData"  ref="formData" style="width:1000px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="检查人员：">
                                <el-input v-model="formData.checkStaffName" style="width:100%" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="任务时间：">
                                <el-input v-model="formData.taskDate" style="width:100%" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">  
                            <el-form-item label="检查级别：">
                                <el-select v-model="formData.checkLevel" style="width:100%">
                                    <el-option 
                                        v-for="item in checkRankOptions"
                                        :key="item.id"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>   
                        <el-col :span="12">
                            <el-form-item label="检查日期：">
                                <el-date-picker
                                    v-model="formData.checkDate" 
                                    style="width: 100%;" 
                                    type="date"
                                    value-format="yyyy-MM-dd" 
                                    placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>  
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">  
                            <el-form-item label="受检单位：">
                                <el-cascader
                                    placeholder="请选择受检单位"
                                    style="width:100%"
                                    v-model="checkCompanyList"
                                    :options="checkCompanyNameOptions"
                                    clearable
                                    filterable
                                    :props="{ checkStrictly: true , value:'nodeCode', label:'label', children:'children'}"
                                    :show-all-levels="false">
                                </el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="检查地点：">
                                <el-input v-model="formData.address" placeholder="请填写检查地点" style="width:100%" ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">  
                            <el-form-item label="检查表：">
                                <el-select v-model="formData.checkListID" style="width:100%" filterable clearable @change="changeCheckList">
                                    <el-option 
                                        v-for="item in checkListOptions"
                                        :key="item.id"
                                        :label="item.checkListName"
                                        :value="item.checkListID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">  
                            <el-form-item label="检查项目：">
                                <el-select v-model="formData.checkItemCode" style="width:100%" filterable clearable @change="changeCheckProject">
                                    <el-option 
                                        v-for="item in checkItemOptions"
                                        :key="item.id"
                                        :label="item.checkListItemName"
                                        :value="item.checkListItemCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item label="检查项：">
                            <el-select v-model="formData.checkListItemCode" style="width:100%" filterable clearable @change="changeCheckItemDetail">
                                <el-option 
                                    style="width:850px"
                                    v-for="item in checkItemDetailOptions"
                                    :key="item.id"
                                    :label="item.checkListItemName"
                                    :value="item.checkListItemCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="问题描述：">
                            <el-input v-model="formData.problemDescription" style="width:100%" type="textarea" :autosize="{ minRows: 4}"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-col :span="12">  
                            <el-form-item label="问题类型：">
                                <!-- <el-input v-model="formData.problemType" style="width:100%" readonly></el-input> -->
                                <el-select v-model="formData.problemType" style="width:100%">
                                    <el-option 
                                        v-for="item in problemTypeOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">  
                            <el-form-item label="隐患等级：">
                                <!-- <el-input v-model="formData.problemRank" style="width:100%" readonly></el-input> -->
                                <el-select v-model="formData.problemRank" style="width:100%">
                                    <el-option 
                                        v-for="item in problemRankOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">  
                            <el-form-item label="问题原因：">
                                <el-select v-model="formData.problemSource" style="width:100%">
                                    <el-option 
                                        v-for="item in problemSourceOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">  
                            <el-form-item label="依据：">
                                <el-input v-model="formData.problemGist" style="width:100%" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">  
                            <el-form-item label="对应要素：">
                                <el-input v-model="formData.hseFactor" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">  
                            <el-form-item label="责任人：">
                                <el-select v-model="formData.responsePersonID" placeholder="输入姓名搜索" style="width:100%" filterable clearable @change="changeResponsibilityPerson">
                                    <el-option 
                                        v-for="item in responsePersonOptions"
                                        :key="item.id"
                                        :label="`${item.name}(${item.companyName})`"
                                        :value="item.employeeID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">  
                            <el-form-item label="用工性质：">
                                <el-input v-model="formData.employmentProperty" style="width:100%" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">  
                            <el-form-item label="岗位工龄：">
                                <!-- <el-input v-model="formData.workingAge" style="width:100%" readonly></el-input> -->
                                <el-select v-model="formData.workingAge" style="width:100%">
                                    <el-option 
                                        v-for="item in workingAgeOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">  
                            <el-form-item label="岗位名称：">
                                <el-input v-model="formData.workingName" style="width:100%" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">  
                            <el-form-item label="整改责任人：">
                                <el-select v-model="formData.supervisorID" placeholder="输入姓名搜索" style="width:100%" filterable clearable>
                                    <el-option 
                                        v-for="item in supervisorOptions"
                                        :key="item.id"
                                        :label="`${item.name}(${item.companyName})`"
                                        :value="item.employeeID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="问题图片1：">
                                <el-upload
                                    v-model="formData.checkAttach1"
                                    :action="`/api/file_upload`"
                                    list-type="picture"
                                    :limit="1"
                                    :before-upload="handleBeforeUpload"
                                    :on-remove="handleRemoveCheckAttach1"
                                    :auto-upload='true'
                                    :headers="{Authorization:currentUser.token}"
                                    :on-success="handleSuccessCheckAttach1">
                                    <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
                                    <div slot="tip" class="el-upload__tip">请上传问题图片，且不大于12M。</div>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="问题图片2：">
                                <el-upload
                                    v-model="formData.checkAttach2"
                                    :action="`/api/file_upload`"
                                    list-type="picture"
                                    :limit="1"
                                    :before-upload="handleBeforeUpload"
                                    :on-remove="handleRemoveCheckAttach2"
                                    :auto-upload='true'
                                    :headers="{Authorization:currentUser.token}"
                                    :on-success="handleSuccessCheckAttach2">
                                    <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
                                    <div slot="tip" class="el-upload__tip">请上传问题图片，且不大于12M。</div>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="问题图片3：">
                                <el-upload
                                    v-model="formData.checkAttach3"
                                    :action="`/api/file_upload`"
                                    list-type="picture"
                                    :limit="1"
                                    :before-upload="handleBeforeUpload"
                                    :on-remove="handleRemoveCheckAttach3"
                                    :auto-upload='true'
                                    :headers="{Authorization:currentUser.token}"
                                    :on-success="handleSuccessCheckAttach3">
                                    <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
                                    <div slot="tip" class="el-upload__tip">请上传问题图片，且不大于12M。</div>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="问题图片4：">
                                <el-upload
                                    v-model="formData.checkAttach4"
                                    :action="`/api/file_upload`"
                                    list-type="picture"
                                    :limit="1"
                                    :before-upload="handleBeforeUpload"
                                    :on-remove="handleRemoveCheckAttach4"
                                    :auto-upload='true'
                                    :headers="{Authorization:currentUser.token}"
                                    :on-success="handleSuccessCheckAttach4">
                                    <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
                                    <div slot="tip" class="el-upload__tip">请上传问题图片，且不大于12M。</div>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item label="问题视频：">
                            <el-upload 
                                class="avatar-uploader el-upload--text"
                                v-model="formData.checkVideo"
                                :action="`/api/file_upload`"
                                :limit="1"
                                accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
                                :before-upload="handleBeforeUpload"
                                :on-progress="uploadCheckVideoProcess"
                                :headers="{Authorization:currentUser.token}"
                                :on-success="handleSuccessCheckVideo"
                                :on-remove="handleRemoveCheckVideo"
                                style="width:100%">
                                <video 
                                    v-if="formData.checkVideo !='' && checkVideoFlag == false"
                                    :src="checkVideourl"
                                    class="avatar video-avatar"
                                    controls="controls">您的浏览器不支持视频播放
                                </video> 
                                <i v-if="formData.checkVideo =='' && checkVideoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
                                <el-progress v-if="checkVideoFlag == true" type="circle" :percentage="checkVideoUploadPercent" style="margin-top:30px;"></el-progress>
                                <div slot="tip" class="el-upload__tip">请上传问题视频，且不大于12M。</div>
                            </el-upload>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="是否立即整改：">
                           <el-checkbox v-model="immediateRectification" @change="changeImmediateRectification">立即整改</el-checkbox>
                        </el-form-item>
                    </el-row>
                    <!-- 是否立即整改 -->
                    <div v-if="immediateRectification === true" style="border-top: 1px solid #dddddd;">
                        <el-form-item label="整改情况如下："></el-form-item>
                        <el-row>
                            <el-col :span="12">  
                                <el-form-item label="安全绩效扣分：">
                                    <el-select v-model="formData.lostScore" style="width:100%">
                                        <el-option 
                                            v-for="item in scoreOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">  
                                <el-form-item label="扣款：">
                                    <el-select v-model="formData.penalty" style="width:100%">
                                        <el-option 
                                            v-for="item in moneyOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">  
                                <el-form-item label="是否批评教育：">
                                    <el-checkbox v-model="criticalEducation" @change="changeCriticalEducation">批评教育</el-checkbox>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">  
                                <el-form-item label="整改情况：">
                                    <el-select v-model="formData.rectification" style="width:100%">
                                        <el-option 
                                            v-for="item in rectificationOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="整改图片1：">
                                    <el-upload
                                        v-model="formData.rectAttach1"
                                        :action="`/api/file_upload`"
                                        list-type="picture"
                                        :limit="1"
                                        :before-upload="handleBeforeUpload"
                                        :on-remove="handleRemoveRectAttach1"
                                        :auto-upload='true'
                                        :headers="{Authorization:currentUser.token}"
                                        :on-success="handleSuccessRectAttach1">
                                        <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
                                        <div slot="tip" class="el-upload__tip">请上传问题图片，且不大于12M。</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="整改图片2：">
                                    <el-upload
                                        v-model="formData.rectAttach2"
                                        :action="`/api/file_upload`"
                                        list-type="picture"
                                        :limit="1"
                                        :before-upload="handleBeforeUpload"
                                        :on-remove="handleRemoveRectAttach2"
                                        :auto-upload='true'
                                        :headers="{Authorization:currentUser.token}"
                                        :on-success="handleSuccessRectAttach2">
                                        <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
                                        <div slot="tip" class="el-upload__tip">请上传问题图片，且不大于12M。</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="整改图片3：">
                                    <el-upload
                                        v-model="formData.rectAttach3"
                                        :action="`/api/file_upload`"
                                        list-type="picture"
                                        :limit="1"
                                        :before-upload="handleBeforeUpload"
                                        :on-remove="handleRemoveRectAttach3"
                                        :auto-upload='true'
                                        :headers="{Authorization:currentUser.token}"
                                        :on-success="handleSuccessRectAttach3">
                                        <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
                                        <div slot="tip" class="el-upload__tip">请上传问题图片，且不大于12M。</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="整改图片4：">
                                    <el-upload
                                        v-model="formData.rectAttach4"
                                        :action="`/api/file_upload`"
                                        list-type="picture"
                                        :limit="1"
                                        :before-upload="handleBeforeUpload"
                                        :on-remove="handleRemoveRectAttach4"
                                        :auto-upload='true'
                                        :headers="{Authorization:currentUser.token}"
                                        :on-success="handleSuccessRectAttach4">
                                        <el-button  type="success" circle><i class="el-icon-plus"></i></el-button>
                                        <div slot="tip" class="el-upload__tip">请上传问题图片，且不大于12M。</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-form-item label="整改视频：">
                                <el-upload 
                                    class="avatar-uploader el-upload--text"
                                    v-model="formData.rectVideo"
                                    :action="`/api/file_upload`"
                                    :limit="1"
                                    accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
                                    :before-upload="handleBeforeUpload"
                                    :on-progress="uploadRectVideoProcess"
                                    :headers="{Authorization:currentUser.token}"
                                    :on-success="handleSuccessRectVideo"
                                    :on-remove="handleRemoveRectVideo"
                                    style="width:100%">
                                    <video 
                                        v-if="formData.rectVideo !='' && rectVideoFlag == false"
                                        :src="rectVideourl"
                                        class="avatar video-avatar"
                                        controls="controls">您的浏览器不支持视频播放
                                    </video> 
                                    <i v-if="formData.rectVideo =='' && rectVideoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
                                    <el-progress v-if="rectVideoFlag == true" type="circle" :percentage="rectVideoUploadPercent" style="margin-top:30px;"></el-progress>
                                    <div slot="tip" class="el-upload__tip">请上传问题视频，且不大于12M。</div>
                                </el-upload>
                            </el-form-item>
                        </el-row>
                    </div>
                    
                    <div v-if="immediateRectification === true" style="border-top: 1px solid #dddddd;">
                        <el-form-item label="验证情况如下："></el-form-item>
                        <el-row>
                            <el-col :span="12">  
                                <el-form-item label="验证人：">
                                    <el-input v-model="formData.verifyPersonName" style="width:100%" readonly></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">  
                                <el-form-item label="验证日期：">
                                    <el-date-picker
                                        v-model="formData.verifyDate" 
                                        style="width: 100%;" 
                                        type="date"
                                        value-format="yyyy-MM-dd" 
                                        placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="整改结果：">
                                    <el-select v-model="formData.rectEffect" style="width:100%">
                                        <el-option 
                                            v-for="item in rectificationEffectOptions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                    <el-row class="buttons" style="border-top: 1px solid #dddddd;padding-top:5px;">
                        <el-form-item >
                           <el-button type="primary" @click="handleSubmit()">确认录入</el-button>
                           <el-button type="danger" @click="$router.go(0)">取消录入</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </div>
		</div>
    </div>
</template>

<script type="text/javascript" src="./problem_entr.js">

</script>
<style lang="scss" scoped>
.buttons{
  padding-top:20px;
  display: flex; 
  justify-content: flex-end;
  height: 100px;
  align-items: center; 
  padding-right: 0%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.video-avatar {
  width: 400px;
  height: 200px;
}
</style>
